<!--
 * @Author: chenjiao
 * @Date: 2021-10-11 11:49:49
 * @LastEditTime: 2021-12-27 17:04:15
 * @LastEditors: Please set LastEditors
 * @Description: 举报管理
 * @FilePath: \工作项目\ebc-admin\src\views\report\Management.vue
-->
<template>
  <div>
      <!-- 列表 -->
    <tab-list
     ref="list"
      :searchs="searchs"
      :list-hedar="listHeader"
      :api-function="apiFunction"
      @init-params="initParams"
    >
     <span 
      slot="reportStatus" 
      slot-scope="scope"
      :style="`color: ${scope.value.reportStatus === '1' ? '#67C23A' : '#F56C6C'}`"
     >
         {{scope.value.reportStatus === '0' ? '待审核' :
          scope.value.reportStatus === '1' ? '已同意' : '已拒绝' }}   
     </span>
     <span
      slot ='reportType'
      slot-scope="scope"
      >
        {{ getReportType(scope.value) }}
     </span>
     <template slot="operat" slot-scope="scope" >
         <el-button v-if="scope.value.reportStatus === '0'" type="text" size="small" @click="auditBox(scope.value,true)">审核</el-button>
         <el-button type="text" size="small" @click="auditBox(scope.value,false)">举报详情</el-button>
     </template>
    </tab-list>
    <!-- 审核弹窗 -->
    <el-dialog
      title="举报审核"
      v-if="reportBox"
      :visible.sync="reportBox"
      :close-on-click-modal="false"
      width="35%"
    >
      <text-list :text-list="textLists"  :detail-info="detailInfo">
         <span
          slot ='reportType'
          >
            {{ getReportType({reportType}) }}
        </span>
      </text-list>  

      <span slot="footer" class="dialog-footer" v-show="isShow">
        <el-button type="primary" @click="attestation(true, detailInfo.reportId)">同 意</el-button>
        <el-button @click="attestation(false,detailInfo.reportId)">拒 绝</el-button>
        <el-button v-show="reportType=='3'|| reportType=='7'||reportType=='8'" @click="openDatailBox(businessId)"  type="success" plain>详 情</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-show="isShow===false">
        <el-button type="primary" @click="reportBox=false">关 闭</el-button> 
        <el-button v-show="reportType=='3'|| reportType=='7'||reportType=='8'" @click="openDatailBox(businessId)"  type="success" plain>详 情</el-button> 
      </span>
    </el-dialog>
    <!-- 审核同意框 -->
    <el-dialog
      title='举报审核'
      :visible.sync="reportBox2"
      :close-on-click-modal="false"
      width="35%"
    >
      <edit-form
        ref="form2"
        :editList="editList"
        :form="form2"
        @on-submit="agreeAuth(true, form2)"
      >
      </edit-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.form2.ruleFrom()">确 定</el-button>
        <el-button  @click="reportBox2=false">取 消</el-button> 
      </span>
    </el-dialog>
    <!-- 审核拒绝框 -->
    <el-dialog
      v-if="refuseShow"
      title="举报审核"
      :visible.sync="refuseShow"
      width="35%"
      :close-on-click-modal="false"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList2"
        :form="form"
        @on-submit="agreeAuth(false, form.reason)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseShow = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审核详情二级弹窗 -->
    <el-dialog
      v-if="datailBox"
      title="举报详情"
      :visible.sync="datailBox"
      width="40%"
    >
      <text-list :text-list="textLists2(reportType)"  :detail-info="detailInfo2" />
       <span slot="footer" class="dialog-footer">
        <el-button @click="datailBox = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import textList from '@/components/admin/text-list.vue'
import editForm from '@/components/admin/edit-form.vue'
// 数据封装
import { listHeader,searchs ,textLists,editList ,rules,editList2 ,textLists2} from './config/management.config.js'
// 接口
import { reportList, reportDetails ,reportAudit ,reportTypeDetail,reportTypeDetail2 ,reportTypeDetail3} from '@/api/report.js'
// 公共方法
import { asyncApiFun } from '@/utils/utils'

export default {
    name:'management',
    components:{
        tabList,
        textList,
        editForm
    },
    data(){
      return {
          listHeader,
          searchs,
          textLists,
          textLists2,
          editList,
          editList2,
          detailInfo:{},
          detailInfo2:{},
          params:{},
          rules,
          apiFunction:reportList,
          reportBox:false, //审核弹窗
          reportBox2:false, //审核同意弹窗
          refuseShow:false,  //审核拒绝弹窗
          datailBox:false,   //举报详情二级弹窗
          isShow:false,    //动态展示审核弹窗底部按钮
          form:{},  //审核拒绝数据
          form2:{
            duration:'30'
          },  //审核通过数据,
          bizId:'',  //业务标识
          businessId:'',   //详情弹窗业务ID
          reportType:null,   // 举报详情二级弹窗举报类型标识
          
        }
    },
    methods:{
    // 审核详情弹窗
      async auditBox({ reportId ,reportType ,businessId }, state) {
          this.isShow = state;
          // 举报类型
          this.reportType = reportType
          this.businessId = businessId
          const [res] = await asyncApiFun(reportDetails, reportId)
          this.detailInfo = res.data
          this.detailInfo.reportPicture = this.detailInfo.reportPicture.split(",")
          this.reportBox = true;
        },
    //同意或拒绝按钮
    attestation(state , bizId ) {
      this.bizId = bizId
      if(state){
        // 打开同意弹窗
        this.reportBox2 = true;
        // 修改label的值
        this.editList.forEach(item => {
          if(item.key=='freeze'){
              item.label = item.getLabel(this.reportType)
            }
          })
      }
      else {
        // 打开拒绝弹窗
        this.refuseShow = true;
        
      }
    }, 
    // 审核
    async agreeAuth(state,form) {
      if(state){
        const _param = {
        bizId:this.bizId,
        freeze:form.freeze,
        state:Number(state),
        isPermanent:this.form2.duration == 0 ? true : false,
        duration:this.form2.duration,
      }
       const [res] = await asyncApiFun(reportAudit,_param)
       this.reportBox2 = false;
       this.reportBox = false;
       if(res)this.$refs.list.getList()
      }
      else {
        const _param = {
          bizId:this.bizId,
          reason:form.reason,
          state:Number(state),
          isPermanent:state
        }
         const [res] = await asyncApiFun(reportAudit , _param)
         this.refuseShow = false 
         if(res) this.$refs.list.getList()
      }
    },   
    //举报or审核详情弹窗
    async openDatailBox(id) {
        this.datailBox = true;
        if(this.reportType =='3') {
           const [res] = await asyncApiFun(reportTypeDetail3,id)
          //重置页面数据
           this.detailInfo2 = {}
           if(res) {
             
             this.detailInfo2.dynamicContent = res.data.shareDynamicDetailVO?.dynamicContent
             this.detailInfo2.picture = res.data.shareDynamicDetailVO?.picture.split(',')
           }
        }
        else if(this.reportType == '7') {
          const [res] = await asyncApiFun(reportTypeDetail2,id)
          this.detailInfo2 = res.data
        }
        else {
          const [res] = await asyncApiFun(reportTypeDetail,id)
          this.detailInfo2 = res.data
        }
        
      },
    // 初始化列表请求参数
      initParams(param) {
        this.params = param
      }
    },
    computed:{
      getReportType(){
        return function({reportType}){
          let _type = ''
          switch (reportType){
            case '1': 
              _type = '个人聊天举报'
              break;
            case '2': 
              _type = '群聊聊天举报'
              break;
            case '3': 
              _type = '个人动态举报'
              break;
            case '4': 
              _type = '个人名片举报'
              break;
            case '5': 
              _type = '组织名片举报'
              break;
            case '6': 
              _type = '评论举报'
              break;
            case '7': 
              _type = '产品服务举报'
              break;
            case '8': 
              _type = '组织动态举报'  
              break;   
          } 
          return _type;
      }
      },
    }
     
}
</script>

<style>

</style>